<template>
  <div class="photo shotbox">
    <el-carousel :interval="5000" arrow="always" height="500px">
      <el-carousel-item v-for="item in bannerList" :key="item.title">
        <img style="width:100%" :src="url + item.filePath" alt="">
      </el-carousel-item>
    </el-carousel>
    <image-list :title="photoTitle"></image-list>
    <video-list :title="videoTitle"></video-list>
  </div>
</template>
<script>
import http from '@/utils/baseUrl'
import {getBannerList,getFirstNew,getIndexVideo} from "@/api/official";
import ImageList from '@/components/ImageList/index.vue'
import VideoList from '@/components/VideoList/index.vue'
export default {
  components:{
    ImageList,
    VideoList
  },
  created() {
    this.getBanner()
  },
  data () {
    return {
      url: http,
      bannerList: [],
      photoTitle:'精彩图片',
      videoTitle:'精彩视频'
    }
  },
  methods:{
    getBanner() {
      getBannerList().then(res => {
        this.bannerList = res.data.list
      })
    }
  }
}
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>